<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 双向绑定 -->
        <!-- 数据变了 -> 界面 -->
        <!-- 界面变了 -> 数据 -->
        <!-- <input type="text" v-model="msg"> -->

        <!-- 尝试自己实现双向绑定 -->
        <!-- input本身就有个行内属性叫value，可以设置输入框默认显示的内容 -->
        <!-- <input type="text" value="你今天有点坏坏的"> -->
        <!-- 
            vue里讲过有个指令叫 v-bind: 可以让行内属性不写死，而是根据数据来决定
            例如： v-bind:href="url"代表href不写死，根据url这个属性决定
            所以同样的道理，如果我不想value写死，就写v-bind:value
         -->
        <!-- 但是我又不希望这个value写死 -->
        <!-- <input type="text" v-bind:value="msg"> -->
        <!-- 简写为:value，只要给value属性动态绑定msg，就能实现msg数据变了，界面跟着变 -->
        <!-- <input type="text" :value="msg"> -->
        <!-- 现在仅仅只是实现了数据变了界面跟这变 -->

        <!-- 现在我还希望实现输入框一边输入，我的数据也一边跟着变 -->
        <!-- <input type="text" :value="msg" @input="input"> -->
        <!-- 如果事件只有一句话，可以写到行内的 -->

        <!-- 通过这样的代码就实现了双向绑定 -->
        <!-- <input type="text" :value="msg" @input="msg = $event.target.value"> -->
        
        <!-- 其实刚刚自己写的那部分相当于就是v-model的原理 -->
        <!-- 
            v-model其实只是语法糖
                语法糖：写少量代码，运行时会自动帮你生成大量代码，这就叫语法糖

            所以也就是说
                v-model="msg"用在原生标签上的时候，他其实就是个语法糖，帮你生成了
                    :value="msg" 以及 @input="msg = $event.target.value"
         -->
        <!-- <input type="text" v-model="msg"> -->

        
        <!-- <p>{{ msg }}</p> -->

        
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: '你very坏-----坏死了，讨厌'
                }
            },
            methods: {
                input (e) {
                    // 一边输入就要一边把输入的内容赋值给msg
                    // 就能实现界面一变数据就跟着变
                    // e就是事件对象 e.target代表找到事件源（在这里就是输入框）
                    // console.log(e.target.value)
                    this.msg = e.target.value
                }
            }
        })
    </script>
</body>
</html>